import React, { Component, Fragment } from 'react'
import axios from 'axios'
import { nanoid } from 'nanoid'
import './Records.css'

export default class Records extends Component {
    state = {
        records: []    //中奖记录
    }

    // 请求奖品记录信息
    showRecords = () => {
        axios.get('http://localhost:5000/records').then(
            res => {
                this.setState({ records: res.data.records });
                // console.log(res.data);
                this.props.changeShowRecords();
            }, err => {
                console.log(err);
            }
        )
    }

    render() {
        return (
            <Fragment>
                <span className="center check" onClick={this.showRecords}>我的奖品</span>
                {
                    this.props.isShowRecords ?
                        <Fragment>
                            <div className="maskBackground"></div>
                            <div className="showRecords">
                                <img className="closeBtn" src='/close.png' alt='' onClick={this.props.changeShowRecords}></img>
                                {
                                    this.state.records.map(item => {
                                        return (
                                            <div className="recordItem" key={nanoid()}>
                                                <img src={item.img} alt="" className="recordImg" />
                                                <div style={{ display: 'flex' }}>
                                                    <div style={{ fontSize: '20px', fontWeight: 'bold' }}>{item.title}</div>
                                                    <button disabled className="center notUse">详情</button>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </Fragment>
                        :
                        null
                }
            </Fragment>

        )
    }
}
